<template>
  <div class="bank-container mtop">
    <m-header title="添加银行卡">
      <span slot="right" clas="concat" @click="handleService">联系客服</span>
    </m-header>
    <div class="form-list">
      <div class="title">请绑定持卡人本人的银行卡</div>
      <div class="form-item line">
        <div class="label">持卡人</div>
        <div class="texts">
          <input type="text" v-model="name" placeholder="请输入持卡人姓名">
        </div>
        <div class="close" v-if="name" @click="name=''"></div>
      </div>
      <div class="form-item">
        <div class="label">卡号</div>
        <div class="texts">
          <input type="text" v-model="bankCode" placeholder="请输入银行卡号">
        </div>
        <div class="point"></div>
      </div>

      <div class="title">请输入发卡银行</div>
      <div class="form-item">
        <div class="label">发卡银行</div>
        <div class="texts">
          <input type="text" v-model="bankName" placeholder="请填写发卡银行">
        </div>
      </div>
      <div class="title">请填写开户行信息</div>
      <div class="form-item line">
        <div class="label">开户行</div>
        <div class="texts">
          <x-address
            title=""
            show.sync="showAddress"
            v-model="bankAddressList"
            :list="addressData"
            @on-shadow-change="onShadowChange"
            placeholder="请选择开户行所在地"
            ></x-address>
          <!-- <input type="text" v-model="bankAddress" placeholder="请选择开户行所在地"> -->
        </div>
      </div>
      <div class="form-item">
        <div class="label">开户行名称</div>
        <div class="texts">
          <input type="text" v-model="branchBank" placeholder="请输入详细支行名称">
        </div>
      </div>

      <div class="title">请填写银行预留信息</div>
      <div class="form-item">
        <div class="label">手机号码</div>
        <div class="texts">
          <input type="text" v-model="mobile" placeholder="请输入真实有效的手机号">
        </div>
      </div>
      <div class="title">信息加密处理，仅用于银行验证</div>
    </div>
    <div class="add-bank" @click="handleAddBank">确认</div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { ChinaAddressV4Data } from 'vux';

export default {
  components: {
  },
  data () {
    return {
      name: '',
      bankCode: '', // 6214835895312708
      bankName: '',
      branchBank: '',
      mobile: '',
      isSetPass: true, // 是否设置过提现密码
      bankAddress: '',
      bankAddressList: [],
      addressData: ChinaAddressV4Data
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'mine/userInfo'
    })
  },
  mounted () {
    const query = this.$route.query;
    if (query.isFirst) { // isFirst 1: 首次
      this.isSetPass = false;
    }
    if (this.userInfo.nickname) {
      this.name = this.userInfo.nickname;
    } else {
      this.getUseInfo();
    }
  },
  methods: {
    ...mapActions({
      getMineInfo: 'mine/mineInfo',
      withdrawAbindCard: 'mine/withdrawAbindCard'
    }),
    handleAddBank () {
      if (!this.name) {
        this.$vux.toast.text('请输入持卡人姓名');
        return false;
      }
      if (!this.bankCode) {
        this.$vux.toast.text('请输入银行卡号');
        return false;
      }
      if (!this.bankName) {
        this.$vux.toast.text('请填写发卡银行');
        return false;
      }
      if (!this.bankAddressList.length) {
        this.$vux.toast.text('请选择开户行所在地');
        return false;
      }
      if (!this.branchBank) {
        this.$vux.toast.text('请输入详细支行名称');
        return false;
      }
      if (!this.mobile) {
        this.$vux.toast.text('请输入真实有效的手机号');
        return false;
      } else if (!/^1[3|4|5|6|7|8|9]\d{9}/ig.test(this.mobile)) {
        this.$vux.toast.text('手机号格式不正确');
        return false;
      }
      const params = {
        name: this.name,
        card_no: this.bankCode,
        card_name: this.bankName,
        account_branch: this.branchBank,
        account_site: this.bankAddress,
        mobile: this.mobile
      }
      this.withdrawAbindCard(params).then(res => {
        if (res) {
          console.log('addBankCardSuccess');
          if (this.isSetPass) {
            this.$router.push({ path: '/bank/withdraw', query: { accountId: res } });
          } else {
            this.$router.push({ path: '/bank/password', query: { accountId: res } });
          }
        }
      })
    },
    handleService () {
      this.$vux.toast.text('如您在使用本站时、遇到任何问题请联系您的代理员');
    },
    onShadowChange (ids, names) {
      this.bankAddress = names.join(' ');
    },
    getUseInfo () {
      this.getMineInfo().then(res => {
        this.name = res.nickname;
      });
    }
    // addBankCard () {
    //   let isSetPass = false; // 是否设置过提现密码
    //   if (isSetPass) {
    //     this.$router.push({ path: '/bank/withdraw' });
    //   } else {
    //     this.$router.push({ path: '/bank/password' })
    //   }
    // }
  }
}
</script>
<style lang="less" scoped>
  .bank-container {
    .form-list {
      .title {
        height: 0.76rem;
        line-height: 0.76rem;
        color: #666666;
        padding: 0 0.2rem;
        font-size: 0.26rem;
        color: #999999;
        background: #f7f7f7;
      }
      .form-item {
        position: relative;
        display: flex;
        height: 0.88rem;
        align-items: center;
        padding: 0 0.2rem;
        background: #ffffff;
        &.line {
          position: relative;
          &::after {
            display: block;
            position: absolute;
            left: 0.2rem;
            right: 0.2rem;
            bottom: 0;
            border-top: 1px solid #d2d2d2;
            content: '';
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
          }
        }
        .label {
          width: 1.58rem;
          font-size: 0.3rem;
          color: #333333;
        }
        .texts {
          flex: 1;
          input {
            width: 100%;
            height: 0.68rem;
            line-height: 0.68rem;
            padding: 0.16rem 0.2rem;
            font-size: 0.28rem;
            color: #333333;
            background: #FFFFFF;
            border: 0.01rem solid #D2D2D2;
            border-radius: 0.06rem;
            border: none;
            box-sizing: border-box;
            &::-webkit-input-placeholder {
              font-size: 0.28rem;
              color: #999999;
            }
          }
        }
        .close {
          position: absolute;
          top: 50%;
          right: 0.3rem;
          width: 0.28rem;
          height: 0.28rem;
          margin-top: -0.34rem;
          padding: 0.2rem;
          background-size: 0.28rem 0.28rem;
          background-repeat: no-repeat;
          background-position: 0.2rem 0.2rem;
          background-image: url('../../../assets/imgs/icon-close2@2x.png');
        }
        .point {
          position: absolute;
          top: 50%;
          right: 0.5rem;
          width: 0.2rem;
          height: 0.56rem;
          margin-top: -0.28rem;
          background-size: 0.2rem 0.56rem;
          background-repeat: no-repeat;
          background-image: url('../../../assets/imgs/icon-point@2x.png');
        }
      }
    }
    .add-bank {
      height: 1rem;
      line-height: 1rem;
      margin: 0.3rem 0.5rem;
      background: #D44743;
      border-radius: 0.06rem;
      font-size: 0.34rem;
      color: #FFFFFF;
      text-align: center;
    }
  }
</style>
